<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件通信示例，场景为展示用户信息</title>
    <!-- 引入 vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- div id 为 app 挂载点 -->
    <div id="app">
        <!-- 使用父组件 -->
        <parent-component></parent-component>
    </div>

    <!-- 使用 javascript 脚本 -->
    <script type="text/javascript">
        // 定义子组件
        Vue.component('child-component', {
            // 声明 props
            props: {
                userName: {
                    type: String,
                    required: true
                },
                userAge: {
                    type: Number,
                    default: 0
                },
                userInfo: {
                    type: Object,
                    default: () => ({})
                }
            },
            // 子组件模板
            template: `
                <div style="border: 1px solid #ccc; padding: 10px; margin: 10px;">
                    <h3>用户信息</h3>
                    <p>姓名: {{ userName }}</p>
                    <p>年龄: {{ userAge }}</p>
                    <p>邮箱: {{ userInfo.email || '未提供' }}</p>
                </div>
            `
        });

        // 定义父组件
        Vue.component('parent-component', {
            // 父组件模板
            template: `
                <div>
                    <h2>父组件</h2>
                    <!-- 遍历用户信息数组，为每个用户渲染一个子组件 -->
                    <child-component 
                        v-for="user in users"
                        :key="user.id"
                        :user-name="user.name" 
                        :user-age="user.age" 
                        :user-info="user.info">
                    </child-component>
                </div>
            `,
            // 父组件数据
            data() {
                return {
                    // 从 Vue 实例的 data 中获取用户信息数组
                    users: this.$root.users
                };
            }
        });

        // 创建 Vue 实例
        new Vue({
            el: '#app',
            // 在 Vue 实例的 data 选项中定义多个用户信息的数组
            data: {
                users: [
                    {
                        id: 1,
                        name: '张三',
                        age: 25,
                        info: {
                            email: 'zhangsan@example.com'
                        }
                    },
                    {
                        id: 2,
                        name: '李四',
                        age: 30,
                        info: {
                            email: 'lisi@example.com'
                        }
                    },
                    {
                        id: 3,
                        name: '王五',
                        age: 22,
                        info: {}
                    }
                ]
            }
        });
    </script>
</body>
</html>